<!--
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-09-23 11:52:15
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-09-27 10:36:15
 * @FilePath: \客户端\app\src\components\rightBox.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="text">
    <div class="text-one">
      <b>推荐阅读</b>
      <div v-for="(v, i) in data" :key="i" @click="detail(v)">
        <p>{{ v.title }} · {{ getDate(v.date) }}</p>
      </div>
    </div>
    <div class="text-two">
      <b>文章标签</b>
      <div class="spans">
        <span v-for="(v, i) in tagList" :key="i">
          <p>{{ v.title }} [0]</p>
        </span>
      </div>
    </div>
  </div>
</template>


<script>
import {
  asyncTagLists,
  asyncClassLists,
  asyncArticleLists,
} from "../api/article";
export default {
  data() {
    return {
      tagList: [],
      classLists: [],
      data: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.getArticleLists();
      this.getTagLists();
      this.getClassLists();
    },
    async getArticleLists() {
      const res = await asyncArticleLists("/articleImg");
      this.data = res.data.list;
    },
    // 标签
    async getTagLists() {
      const res = await asyncTagLists("/tagLists");
      this.tagList = res.data.list;
    },
    // 分类
    async getClassLists() {
      const res = await asyncClassLists("/classLists");
      this.classLists = res.data.list;
    },
    detail(v) {
      this.$router.push({
        path: "/layout/detail",
        query: {
          detailId: v.id,
        },
      });
    },
  },
  //   计算时间
  computed: {
    getDate() {
      return function (val) {
        var timestamp = new Date(val).getTime();
        var minute = 1000 * 60;
        var hour = minute * 60;
        var day = hour * 24;
        var halfamonth = day * 15;
        var month = day * 30;
        var year = day * 365;
        var now = new Date().getTime();
        var diffValue = now - timestamp;
        var result;
        if (diffValue < 0) {
          return;
        }
        var yearC = diffValue / year;
        var monthC = diffValue / month;
        var weekC = diffValue / (7 * day);
        var dayC = diffValue / day;
        var hourC = diffValue / hour;
        var minC = diffValue / minute;
        if (yearC >= 1) {
          result = "" + parseInt(yearC) + "年前";
        } else if (monthC >= 1) {
          result = "" + parseInt(monthC) + "月前";
        } else if (weekC >= 1) {
          result = "" + parseInt(weekC) + "周前";
        } else if (dayC >= 1) {
          result = "" + parseInt(dayC) + "天前";
        } else if (hourC >= 1) {
          result = "" + parseInt(hourC) + "小时前";
        } else if (minC >= 1) {
          result = "" + parseInt(minC) + "分钟前";
        } else result = "刚刚";
        return result;
      };
    },
  },
};
</script>
<style lang="less" scoped>
* {
  text-decoration: none;
  p::-moz-selection {
    background: #ff0064;
    color: #fff;
  }
  p::selection {
    background: #ff0064;
    color: #fff;
    cursor: pointer;
  }
}
.text,
.text-one,
.text-two {
  animation: down 1s linear;
}

@keyframes down {
  0% {
    height: 0;
  }
  50%{
    height:80px;
  }
  100% {
    height: 191px;
  }
}

p:hover {
  color: red;
  cursor: pointer;
}
@media (min-width: 1200px) {
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    .main {
      width: 80%;
      margin-left: auto;
      margin-right: auto;
    }
    // 右侧
    .text {
      width: 25%;
      margin: 20px;
      position: fixed;
      top: 60px;
      right: 150px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      font-size: 12px;
      .text-one {
        display: flex;
        flex-direction: column;
        background: #fff;
        justify-content: space-between;
        align-items: flex-start;
        b {
          width: 90%;
          font-weight: 20px;
          margin: 15px;
        }
        p {
          padding: 10px;
          margin-left: 10px;
        }
      }
      .text-two {
        display: flex;
        flex-direction: column;
        background: #fff;
        justify-content: space-between;
        align-items: flex-start;
        margin-top: 20px;
        b {
          width: 90%;
          font-weight: 20px;
          margin: 15px;
        }
        p {
          padding: 10px;
          margin-left: 10px;
        }
      }
    }
  }
}

@media (min-width: 870px) and (max-width: 1200px) {
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    .main {
      width: 70%;
      margin-left: auto;
      margin-right: auto;
      .text {
        width: 25%;
        margin: 20px;
        position: fixed;
        top: 60px;
        right: 150px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        font-size: 12px;
        .text-one {
          display: flex;
          flex-direction: column;
          background: #fff;
          justify-content: space-between;
          align-items: flex-start;
          b {
            width: 90%;
            font-weight: 20px;
            margin: 15px;
          }
          p {
            padding: 10px;
            margin-left: 10px;
          }
        }
        .text-two {
          display: flex;
          flex-direction: column;
          background: #fff;
          justify-content: space-between;
          align-items: flex-start;
          margin-top: 20px;
          b {
            width: 90%;
            font-weight: 20px;
            margin: 15px;
          }
          p {
            padding: 10px;
            margin-left: 10px;
          }
        }
      }
    }
  }
}

@media (min-width: 20px) and (max-width: 870px) {
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    .main {
      width: 100%;
      margin-left: auto;
      margin-right: auto;

      .text {
        display: none;
        width: 30%;
        margin: 20px;
        height: 100px;
        position: fixed;
        top: 60px;
        right: 90px;
        border: 1px solid #ccc;

        .text-one {
          width: 100%;
          height: auto;
          border: 1px solid #ccc;
          margin-top: 20px;
        }
        .text-two {
          width: 100%;
          height: auto;
          border: 1px solid #ccc;
        }
      }
    }
  }
}
</style>